<template>
  <div>
      <router-link to="/"><van-icon name="arrow-left" size="30" style="flex: 1" /></router-link>
<router-link tag="div" :to="`/player/${item.id}/${item.name}/${setUrl(item.picUrl)}`" v-for="item in dataList" :key="item.id" class="list">
  {{item.name}}
  <div class="aut">{{item.artists[0].name}}</div>
  <div class="line_01"></div>
</router-link>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            dataList: [],
            value: ''
        }
    },
    mounted() {
        this.ajaxSearch();
    },
    methods: {
        ajaxSearch(){
            let url = "/api/search?keywords="+this.$route.params.name;
            // console.log(this.value);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
            })
                .then((res) => {
                    this.dataList = res.data.result.songs;
                    // this.dataList = res.data;
                    // this.dataList = res;
                    // console.log(this.dataList);
                    // console.log(res);
                    // console.log(res.data);
                    // console.log(res.data.result);
                    // console.log(res.data.result.songs);
                    console.log(this.dataList);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
        setUrl(url){
            if(url){
                return encodeURIComponent(url)
            }
        },
    },
}
</script>

<style scoped>
.list {
  display: block;
  height: 50px;
  padding: 10px 5px;
}
.aut {
    color:darkgray;
}
.line_01{
    padding: 0 10px;
    margin: 20px 0;
    border-top: 0.7px solid #ddd;
}
</style>